<template>
	<view>
		<view class="list-chat" v-for="(item ,index) in list" :index="index" :key="index">
			<view class="chat-left" @click="getSongUrl(item)">
				<view class="chat-left-img"><image :src="item.al.picUrl"></image></view>
				<view class="chat-left-info">
					<view>{{item.name}}</view>
					<view>{{item.ar[0].name}}</view>
				</view>
			</view>
			<view class="chat-right" @click="ability(item)">
				<uni-icons type="more-filled" color="#999" size="18"></uni-icons>
			</view>
		</view>
		
		<u-popup-list :list="geDanFunctions" :refs="refs" v-if="show"></u-popup-list>
		
		<uni-load-more :status="loadStatus" ></uni-load-more>
	</view>
</template>

<script>
	import {songUrl, songLyric} from '@/API/API.js';
	import util from '../../utils/util';
	import { mapGetters, mapMutations} from 'vuex'
	export default {
		name: "u-single-list",
		
		props: {
			title: {
				type: String,
				default: ''
			},
			
			geDanFunctions: {
				type:  Array,
				default: []
			},

			list: {
				type: Array,
				default: []
			},
			
			loadStatus: {
				type: String,
				default: 'loading'
			},
			
			refs: '',
			show: {
				type: Boolean,
				default: false
			}
		},

		data() {
			return {
				lyric: {},
				item: {},
			};
		},
		
		mounted() {
			uni.$on('singleListOnReachBottom', function(keywords,  offset){	
				setTimeout(()=>{ 
					uni.$emit('search', {keywords: keywords, offset: offset, type: 1});
				}, 500);
			});
			
			setTimeout(()=> {
				uni.$on('closePopup', function(data) {
					uni.$emit('close');
				});
			}, 400);
		},
		
		methods: {
			...mapMutations({
				setPlaying: 'SET_PLAYING',
			 }),
			 
			play(){
				let data = {};
				data['id'] = this.item.id;
				data['name'] = this.item.name;
				data['singer'] = this.item.ar[0].name;
				data['singerID'] = this.item.ar[0].id;
				data['picUrl'] = this.item.al.picUrl;
				data['isPlay'] = true;
				data['time'] = this.time;
				data['songLyric'] = this.lyric;
				
				let value = JSON.parse(util.getStorageSync('playList'));
				if(value.length){
					let is_set = true;
					value.some(val => {
						if(val.id == data.id){
							is_set = false;
							return true;
						}
						
						val.isPlay = false;
					});
					console.log(is_set)
					
					if(is_set){
						console.log(1111)
						// this.setPlaying(data)
						value.unshift(data);
						util.setStorageSync('playList', JSON.stringify(value));
						
						uni.$emit('playingUpdata', data);
						uni.$emit('playSong', data);
					}					
				}else{
					// this.setPlaying(data)
					value.push(data);
					util.setStorageSync('playList', JSON.stringify(value));
					uni.$emit('playingUpdata', data);
					uni.$emit('playSong', data);
				}
			},
			
			getSongUrl(item){
				this.songLyric(item.id);
				this.item = item;
			},
			
			songLyric(id){
				var lrcObj = {};
				songLyric({id: id}).then(data => {
					var lyricArr = data.lrc.lyric.split('[').slice(1);
					lyricArr.forEach(item => {
						var arr = item.split(']');
						// 时间换算成秒
						var m = parseInt(arr[0].split(':')[0])
						var s = parseInt(arr[0].split(':')[1])
						arr[0] = m * 60 + s;
						if (arr[1] != '\n') { // 去除歌词中的换行符
							lrcObj[arr[0]] = arr[1];
						}
						
					});
					this.lyric = lrcObj;
				});
			},
			
			ability(list){
				let value = JSON.parse(util.getStorageSync('collection'));
				if(value.length){
					value.some(val => {
						if(val.id == list.id){
							this.geDanFunctions[0].text = '取消收藏';
							return true;
						}else{
							this.geDanFunctions[0].text = '收藏';
						}
					})
				}else{
					this.geDanFunctions[0].text = '收藏';
				}
				
				let item = {};
				let artists = [];
				let songList = {};
				let aliaList = {};
				item.id = list.id; 
				item.name = list.name;
				
				songList.id = list.ar[0].id;
				songList.name = list.ar[0].name;
				artists.push(songList);
				
				aliaList.picUrl = list.al.picUrl;
				
				item.ar = artists;
				item.al = aliaList;
				
				uni.$emit('popup', {type: 'popup', param: item});
			}
		},
		
		watch: {
			lyric(newVal){
				if(Object.keys(newVal).length){
					this.play();
				}
			}
		}

	}
</script>

<style>
	@import url("@/static/css/iconfont.css");	
	.list-chat{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 10px;
		background-color: #fff;
		border-bottom: 1px solid #ccc;
	}
	
	.chat-left{
		width: 90%;
		display: flex;
		align-items: center;
	}
	
	.chat-left-img{
		width: 45px;
		height: 45px;
	}
	
	.chat-left-img image{
		width: 100%;
		height: 100%;
		border-radius: 4px;
	}
	
	.chat-left-info{
		font-size: 13px;
		line-height: 1.6;
		padding-left: 10px;
	}
	
	.chat-left-info view:first-child{
		width: 240px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.chat-left-info view:last-child{
		font-size: 12px;
		font-weight: normal;
		color: #696666;
	}
	
	.chat-right{
		padding: 8px 10px;
	}
</style>
